<template>
  <div id="kanjialiebiao">
      <div class="box">
          <span class="q1" @click="pao">&lt;</span><span class="q2">全民砍价</span>
      </div>
       <div class="box3">
     <ul>
       <li v-for="(item,index) in kan" :key="index" v-show="index>2" class="aa">
         <span>
           <img :src="item.pic" alt="">
         </span>
         
        <div>
            <p>{{item.name}}</p>
            <span>{{item.characteristic}}</span>
            <ol class="qwe">
              <li class="cc">
                ￥{{item.minPrice}}
                 
              </li>
              <li>
                ￥{{item.originalPrice}}
              
              </li>
              <li>{{item.stores}}件</li>
            </ol>
             <ol>
             <li>低价</li>
             <li>原价</li>
             <li>限量</li>
            </ol>
        </div>
       </li>
     </ul>
    </div>
 </div>
</template>

<script>
import { getshop} from '../utils/api'
export default {
  name: '',
  data() { 
    return {
            kan:[]
    }
  },
  created() {
       getshop().then(res=>{
          
           this.kan=res
       })
  },
  methods:{
      pao(){
          this.$router.go(-1)
      },
     
  },
 }
</script>

<style scoped lang='scss'>
.box{
    width: 100%;
    height: 50px;
    // background-color: red;
    line-height: 50px;
   border-bottom: 1px solid #cccc;
    .q1{
        font-size: 20px;
        margin-left: 24px;
    }
     .q2{
         margin-left: 110px;
         font-size: 18px;
     }
}
 .box3{
   width: 100%;
   height: 250px;
   background-color: #F5F5F5;
   ul{
     width: 100%;
     height: 240px;
     background-color: white;
     .aa{
       width: 100%;
       height: 120px;
       display: flex;
        justify-content: space-around;
      border-bottom: 1px solid #cccc;
         
        span{
            width: 32%;
         height: 100%;
          img{
           margin-top: 8px;
            width: 100%;
            height: 88%;  
         
       }
        }
      
       div{
         width: 60%;
          p{
              margin-top: 8px;
            font-size: 15px;
            margin-bottom: 15px;
          }
          span{
            font-size: 12px;
            color: #B2B2B2;
           
          }
          ol{
            width: 100%;
           
           
           
            li{
              width: 60px;
              height: 20px;
              float: left;
              //  background-color: red;
               margin-right: 10px;
               text-align: center;
               line-height: 20px;
               font-size: 14px;
             
                
              
            }
          }
       }
     }
   }
 }
 .qwe{
   margin-top: 17px;
    .cc{
                 color: red;
                 font-size: 14px;
                 font-weight: 700;
               }
 }
</style>